<template>
	<view :class="'align-end cu-bar search '+bgColor" :style="'padding-bottom:6px;padding-right:'+right+'px;height:'+height+'px'">
		<view class="search-form round" :style="'height:'+inputHeight+'px;background:#f0f0f0;color: #333333;'">
			<text class="cuIcon-search"></text>
			<input :adjust-position="false" v-model="keyword" type="text" :placeholder="placeholder" @confirm="search" confirm-type="search"></input>
			<text class="text-xl" @tap="clear" v-show="keyword.length>0"><text class="cuIcon-roundclose text-grey"></text></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				_placeholder:"",
				keyword:"",
				right:"100px",
				inputHeight:"35px"
			};
		},
		name: 'search-input',
		props: {
			placeholder:{
				type:String,
				default:""
			},
			height:{
				type:Number,
				default:60
			},
			bgColor:{
				type:String,
				default:"bg-white"
			}
		},
		created() {			
			this._placeholder=this.placeholder
			this.right=this.MenuButtonRight
			this.inputHeight=this.MenuButtonHeight-3
		},
		methods: {
			search() {
			  this.$emit("search",this.keyword)
			},
			clear(){
				this.keyword=""
				this.$emit("search",this.keyword)
			}
		}
	}
</script>

<style>
</style>